<template>
  <div class="card-items" style="display: flex; flex-direction: column">
    <div style="margin: 10rpx; display: flex; justify-content: space-between">
      <div>
        <span class="card-date">{{ date < 10 ? "0" + date : date }}</span>
        <span class="card-month"
          >{{ year }}年{{ month < 10 ? "0" + month : month }}月</span
        >
      </div>
      <van-icon name="arrow" />
    </div>
    <van-divider dashed customStyle="margin:10rpx;border-color: #1989fa;" />
    <van-empty
      v-if="!hasDiary"
      customStyle=""
      description="还没有日记哦，赶紧写一篇吧"
    />
    <div style="margin: 20rpx" v-if="hasDiary">
      <div>标题：{{ title }}</div>
      <van-grid  :column-num="3" :border="false">
        <van-grid-item
          use-slot
          v-for="(item, index) in imgList"
          :key="index"
          :value="item"
        >
          <img
            style="width: 100%; height: 150rpx; border-radius: 10rpx"
            :src="item"
          />
        </van-grid-item>
      </van-grid>
    </div>
  </div>
</template>

<script>
import VanDivider from "wxcomponents/vant/divider/index";
import VanEmpty from "wxcomponents/vant/empty/index";

export default {
  props: ["year", "month", "date", "hasDiary", "imgList", "title"],
  data() {
    return {
      
    };
  },
  methods: {},
  components: {
    VanDivider,
    VanEmpty,
  },
};
</script>
<style scoped>
.card-items {
  width: 730rpx;
  background-color: white;

  margin-top: 10rpx;
  border-radius: 20rpx;
}
.card-date {
  margin: 20rpx;
  color: #66ccff;
  font-weight: bold;
  font-size: 30rpx;
}
.card-month {
  color: #cfd8dc;
  font-weight: bold;
  font-size: 20rpx;
}
</style>